<template>
  <a-tabs v-model:activeKey="activeKey" @change="tabChange(activeKey)">
    <a-tab-pane key="1" tab="接警信息">
      <div v-if="alarmInformation == '' || alarmInformation == null"><a-empty /></div>
      <a-list v-else size="large" bordered :data-source="alarmInformation">
        <template #renderItem="{ item }">
          <a-list-item>{{ item.fieldName }}：{{ item.value }}</a-list-item>
        </template>
      </a-list>
    </a-tab-pane>
    <a-tab-pane key="2" tab="反馈信息">
      <div v-if="feedbackInformation == '' || feedbackInformation == null"><a-empty /></div>
      <a-tabs v-else type="card" v-model:feedbackInformationKey="feedbackInformationKey">
        <a-tab-pane
          v-for="(feedbackItem, index) in feedbackInformation"
          :key="index"
          :tab="'第' + (index + 1) + '次反馈'"
        >
          <a-list size="large" bordered :data-source="feedbackItem">
            <template #renderItem="{ item }">
              <a-list-item>{{ item.fieldName }}：{{ item.value }}</a-list-item>
            </template>
          </a-list>
        </a-tab-pane>
      </a-tabs>
    </a-tab-pane>
    <a-tab-pane key="3" tab="出警信息">
      <div v-if="policeInformation == '' || policeInformation == null"><a-empty /></div>
      <a-list v-else size="large" bordered :data-source="policeInformation">
        <template #renderItem="{ item }">
          <a-list-item>{{ item.fieldName }}：{{ item.value }}</a-list-item>
        </template>
      </a-list>
    </a-tab-pane>
  </a-tabs>
</template>

<script lang="ts">
import { defineComponent, ref, reactive, onMounted } from 'vue';
// import PoliceInformationDetails from './js/callThePolice';
// import Feedback from './js/feedback';
import {
  getCallDetail,
  getDepartDetail,
  getDealDetail,
} from '@/api/district-monitoring/jurisdiction-list/jurisdiction-details/police-list';
//接警反馈信息
export type PoliceDetails = {
  fieldName: string;
  fieldCode: string;
  value?: string | null | number;
};
export default defineComponent({
  props: {
    caseNo: { type: String },
  },
  setup(props) {
    const ListDetailParams = reactive({
      caseNo: props.caseNo,
    });
    //接警信息
    const alarmInformation = ref<Array<PoliceDetails>>([]);

    //出警信息
    const policeInformation = ref<Array<PoliceDetails>>([]);

    //反馈信息
    const feedbackInformation = ref<Array<Array<PoliceDetails>>>([]);

    //接警信息接口
    const callDetail = async () => {
      const res = await getCallDetail(ListDetailParams);
      if (res.code === 200) {
        alarmInformation.value = res.data;
      }
    };

    //出警信息接口
    const departDetail = async () => {
      const res = await getDepartDetail(ListDetailParams);

      if (res.code === 200) {
        policeInformation.value = res.data;
      }
    };

    //反馈信息接口
    const dealDetail = async () => {
      const res = await getDealDetail(ListDetailParams);
      if (res.code === 200) {
        feedbackInformation.value = res.data;
      }
    };

    const tabChange = (activeKey: string) => {
      if (activeKey == '1') {
        callDetail();
      } else if (activeKey == '2') {
        dealDetail();
      } else if (activeKey == '3') {
        departDetail();
      }
    };

    onMounted(() => {
      callDetail();
    });

    return {
      activeKey: ref('1'),
      feedbackInformationKey: ref('0'),
      alarmInformation,
      policeInformation,
      feedbackInformation,
      callDetail,
      departDetail,
      dealDetail,
      tabChange,
    };
  },
});
</script>

<style></style>
